<template>
	<div>
		<van-nav-bar :title="$t('message.global.lotteryquery')" left-text="" :right-text="$t('message.global.regulation')" left-arrow @click-right="onClickright"  @click-left="onClickLeft" />
        <div style="height: 3.625rem;"></div>
		<van-pull-refresh v-model="upLoading" :disabled='onloadtype' @refresh="onRefresh">
		<van-list
		v-model="loading"
		:finished="finished"
		finished-text="没有更多了"
		@load="onLoad"
		animation-duration:100
		:offset='100'
		>
		
		<div class="doulist" v-if="list.length>0"  v-for="(item,index) in list" :key="index">
            
            <div class="doublecen">
               
                <p class="doublespanbotm">
                    <!-- <span>{{$Format(item.end_timestamp*1000)}}期</span> -->
                    <span>{{$Format(item.cycle_ts*1000)}}{{$t('message.global.expect')}}</span>
                   
                </p>
                 <div class="doublespan" @click="popUp(item.card_type,item.flip_card)"> 
					
                    <p :class="item.typeclass" class="imgspan" @click="popUp(item.card_type,item.flip_card)" >
						<span ><img :src="item.flip_card.icon" alt=""></span> 
						<br>
						<span>{{$t('message.global.view')==1?item.flip_card.cn_title:item.flip_card.en_title}}</span>
                 </p>
                  
                </div>
            </div>
            <van-divider :style="{ color: '#ebedf0', borderColor: '#ebedf0', padding: '0 16px' }"/>
  
        
        </div>
        
       
		 <div class="backgroun" v-show="show"></div>
        <div :class="typeclassname"  v-show="show">
            <p>
                <!-- <span style="">{{tone.cn_title}}</span>
                <span >{{tone.cn_content}}</span> -->
                 <span style="">{{$t('message.global.view')==1?tone.cn_title:tone.en_title}}</span>
                <span >{{$t('message.global.view')==1?tone.cn_content:tone.en_content}}</span> 
            </p>
            <div @click="occlude()"><img style="width: 1rem;height: 1.07rem;" src="../images/doublejoy/bingg@2x.png"/></div>

            <!--<img src="../images/doublejoy/bou7@2x.png"/>-->
        </div>
        <div v-show="noRecord" style="width: 100%;text-align: center;">
            <img style="width: 12.5rem;height: 12.5rem;" src="../images/doublejoy/kong2@2x.png"/>
            <!-- <p style="color: rgba(88, 88, 103, 1); font-size: 1rem;padding-top:1rem;">暂无记录</p> -->
            
        </div>
        <div style="height: 1.25rem;width: 100%; "></div>
		</van-list>
		</van-pull-refresh>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				newpassword: '',
				againpassword: '',
				noRecord:false,
				list:[],
				list1:[],
				show:false,
				typeclassname:'',
				tone:'',
				 loading: true,   //是否处于加载状态
				finished: false,  //是否已加载完所有数据
				page:0,
				isloading:true,
                upLoading:true,
                onloadtype:false,     //弹出不执行上拉
                disabledType:true
			}
		},
		mounted() {
			
			this.onLoad()
		},
		methods: {
			onLoad() {      //上拉加载
				if(this.isloading){				
					setTimeout(() => {
					this.page+=1
                    this.init()
								
					// 数据全部加载完成					
                }, 50);
				}
                
			},
			onRefresh() {       //下拉刷新
                setTimeout(() => {
                    // this.finished = false;
					this.upLoading = false;
					
                    this.page=1
                    this.init('1')
                }, 500);
            },
			init(a){
				this.isloading=false
				// 获取开奖查询 
				 this.$get('member/flip_card/record',{
                         'page':this.page,
                         "per_page":8,
                         "status":2
					 })
					 .then((res)=>{
						 if(a=='1'){
							 this.list = []
						 }
						//  防止接口没有请求完
						 this.isloading=true
						 // 加载状态结束
				        this.loading = false;
						//  this.loading = false;
						//  this.finished = true;
						//  this.list=res.items
						 for(var i=0;i<res.items.length;i++){
							 this.list.push(res.items[i])
							//  console.log(res.items[i].card_type)
							  if(res.items[i].card_type=='1'){
								  
								res.items[i].typeclass='heitao' 
								}else if(res.items[i].card_type=='2'){
								res.items[i].typeclass='meihua' 
								}else if(res.items[i].card_type=='3'){
								res.items[i].typeclass='hongtao' 
								}else if(res.items[i].card_type=='4'){
									res.items[i].typeclass='fangkuai' 
								}
						 }
						 
						 if (this.page >= res.pages) {
                            this.finished = true;
                            this.disabledType=false
						}else{
							this.finished = false;
						}
						 if(res.items.length<=0){
                            this.noRecord=true    
                        }else{
                           this.noRecord=false 
                        }											 
                     })
                     .catch((error)=>{
                         if (error.response.status == 401) {
                             var ua = navigator.userAgent.toLowerCase();
                                if(/iphone|ipad|ipod/.test(ua)) {	
                                     window.webkit.messageHandlers.appTokenInvalid.postMessage('1');	
                                // if((typeof jsObj)!="undefined"){
                                        
                                //     jsObj.appTokenInvalid()
                                // }else{                               
                                // }
                            } else if(/android/.test(ua)) {					
                                if((typeof jsObj)!="undefined"){					   	
                                   jsObj.appTokenInvalid()					  
                                }else{				   	                                   
                                }                            
                         }
                         }
                    })
			},
			 popUp(e,b) { 
               
                this.tone=b             
                if(e=='1'){
                   this.typeclassname='heitaoo' 
                }else if(e=='2'){
                   this.typeclassname='meihuaa' 
                }else if(e=='3'){
                   this.typeclassname='hongtaoo' 
                }else{
                    this.typeclassname='fangkuaii' 
                }
                 this.onloadtype=true
                // 设置不能下拉
                this.finished = true;
                this.show=true
			},
			 occlude(){
                this.typeclassname='meihuaa'
                 this.onloadtype=false
                // 设置能下拉
                if(this.disabledType){
                     this.finished = false
                }else{                   
                    this.finished = true
                }
                this.show=false 
            },
		    /*返回*/
			onClickLeft() {
				this.$router.go(-1)
			},
			/*开奖查询*/
			onClickright(){
			    this.$router.push({
                            path: '/regulation',
                           
                        })
			},
			
		}
	}
</script>

<style scoped>
	.van-nav-bar {
	    position: fixed;
        top: 0rem;
        width: 100%;
		/*background: linear-gradient(blue, pink);*/
		/*background: linear-gradient(to right, #FF6348,#ff755d,  #FFC267)*/
	}
	 .backgroun {
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #333;
        opacity: .7;
    }
	.imgspan span:nth-of-type(1){
		width: .71875rem;
		height: 1.1875rem;
		display: inline-block;
		margin-top: 1rem
	}
	.imgspan{
		text-align: center
	}
	.doublespan p{
	    width: 2.59375rem;
	    height: 3.90625rem;
	    display: inline-block;
		
	}
	.doublespanbotm span{
	    font-size: 0.9375rem;
	    color: rgba(88, 88, 103, 1);
	    display: inline-block;
	    line-height: 3.8125rem;
	}
	
	.doublespanbotm span:nth-of-type(2){
        margin-top: 0.325rem;
        color: rgba(159, 1, 17, 1);
    }
	.doublespan span:nth-of-type(2){
        margin: 0rem 0.3125rem;
    }
	.doublecenter{
	    text-align: center;
	    font-size: 0.9375rem;
	    color: rgba(166, 166, 166, 1);
	    margin-bottom: 0.8125rem;
	}
	.doublecen{
	   display: flex;
        justify-content: space-between;
        padding: 0rem 1.25rem; 
       
	}
	.meihua {
        
        background: url(../images/doublejoy/b10@2x.png) no-repeat 0rem top;
        background-size: 100% 100%;
    } 
	.fangkuai{
       
        background: url(../images/doublejoy/b11@2x.png) no-repeat 0rem top;
        background-size: 100% 100%;
    } 
	 .hongtao  {
        
        background: url(../images/doublejoy/b9@2x.png) no-repeat 0rem top;
        background-size: 100% 100%;
    } 
	 .heitao {
       
        background: url(../images/doublejoy/b8@2x.png) no-repeat 0rem top;
        background-size: 100% 100%;
    } 
	.texcenter{
	    display: flex;
	    justify-content: space-between;
	    padding: 0rem 1.25rem;
	    margin-top: 1.875rem;
	}
	
	.van-nav-bar__text{
	    color: #333;
	}
	.registercen{
		padding: 0rem 1rem;
		text-align: left;
		line-height: 1.875rem;
		font-size: 0.8125rem;
		color: rgba(166, 166, 166, 1);
	}
	.van-nav-bar__title {
		color: #333;
	}
	.van-nav-bar .van-icon{
		color: #333;
	}
	.meihuaa {
        position: fixed;
        z-index: 3;
        top: 50%;
        left: 50%;
        margin-left: -10.25rem;
        margin-top: -14.25rem;
        text-align: center;
    } 
    .meihuaa p {
        width: 20.5rem;
        height: 26.375rem;
        background: url(../images/doublejoy/bou7@2x.png) no-repeat 1.3rem top;
        background-size: 100% 100%;
    }   
    .meihuaa p span:nth-of-type(1) {
        width: 100%;
        margin-left: 0.6rem;
        font-size: 1.25rem;
        color: rgba(83, 37, 26, 1);
        margin-top: 2.325rem;
        display: inline-block;
        font-weight:600 ;
        letter-spacing:0.3125rem
    }
    .meihuaa p span:nth-of-type(2) {
         width: 10.75rem;      
        font-size: 0.75rem;
        color: rgba(83, 37, 26, 1);       
        display: inline-block;
        margin-top: 6.2rem;
        margin-left: 0.2rem; 
        text-align: left ;
        height: 8rem;  
            overflow: auto;     
    }
    
    .fangkuaii {
        position: fixed;
        z-index: 3;
        top: 50%;
        left: 50%;
        margin-left: -10.25rem;
        margin-top: -14.25rem;
        text-align: center;
    } 
    .fangkuaii p {
        width: 20.5rem;
        height: 26.375rem;
        background: url(../images/doublejoy/bb18@2x.png) no-repeat 1.3rem top;
        background-size: 100% 100%;
    }   
    .fangkuaii p span:nth-of-type(1) {
        width: 100%;
        margin-left: 0.6rem;
        font-size: 1.25rem;
        color: rgba(83, 37, 26, 1);
        margin-top: 2.325rem;
        display: inline-block;
        font-weight:600 ;
        letter-spacing:0.3125rem
    }
    .fangkuaii p span:nth-of-type(2) {
         width: 10.75rem;      
        font-size: 0.75rem;
        color: rgba(83, 37, 26, 1);       
        display: inline-block;
        margin-top: 6.2rem;
        margin-left: 0.2rem;   
        text-align: left;
        height: 8rem;  
            overflow: auto;    
    }
    .hongtaoo {
        position: fixed;
        z-index: 3;
        top: 50%;
        left: 50%;
        margin-left: -10.25rem;
        margin-top: -14.25rem;
        text-align: center;
    } 
    .hongtaoo p {
        width: 20.5rem;
        height: 26.375rem;
        background: url(../images/doublejoy/bb17@2x.png) no-repeat 1.3rem top;
        background-size: 100% 100%;
    }   
    .hongtaoo p span:nth-of-type(1) {
        width: 100%;
        margin-left: 0.6rem;
        font-size: 1.25rem;
        color: rgba(83, 37, 26, 1);
        margin-top: 2.325rem;
        display: inline-block;
        font-weight:600 ;
        letter-spacing:0.3125rem
    }
    .hongtaoo p span:nth-of-type(2) {
         width: 10.75rem;      
        font-size: 0.75rem;
        color: rgba(83, 37, 26, 1);       
        display: inline-block;
        margin-top:6.2rem;
        margin-left: 0.2rem;  
        text-align: left ;
        height: 8rem;  
            overflow: auto;    
    }
    .heitaoo {
        position: fixed;
        z-index: 3;
        top: 50%;
        left: 50%;
        margin-left: -10.25rem;
        margin-top: -14.25rem;
        text-align: center;
    } 
    .heitaoo p {
        width: 20.5rem;
        height: 26.375rem;
        background: url(../images/doublejoy/bb19@2x.png) no-repeat 1.3rem top;
        background-size: 100% 100%;
    }   
    .heitaoo p span:nth-of-type(1) {
        width: 100%;
        margin-left: 0.6rem;
        font-size: 1.25rem;
        color: rgba(83, 37, 26, 1);
        margin-top: 2.325rem;
        display: inline-block;
        font-weight:600 ;
        letter-spacing:0.3125rem
    }
    .heitaoo p span:nth-of-type(2) {
         width: 10.75rem;      
        font-size: 0.75rem;
        color: rgba(83, 37, 26, 1);       
        display: inline-block;
        margin-top: 6.2rem;
        margin-left: 0.2rem; 
        text-align: left ;
        height: 8rem;  
            overflow: auto;     
    }
</style>